import type { FC, PropsWithChildren } from "react";
import Icon from "../../../Icon";
import { getRgb, initvalue } from "../../../common/utils";
import { useAccentColor } from "../../../common/hooks/useAccentColor";
import { context } from "../../../common/context";
import { Title } from "./style";

const Index: FC<PropsWithChildren<{ name: string }>> = ({ children, name }) => {
  const {
    resume: { customization, content },
    fontScale,
  } = context;

  const { spacing, applyAccentColor, title } = customization;

  const { showIcon, style, titleBkg: bkg } = title || {};
  const { fontSize, spacingFactor } = spacing;
  const titleFontSize = `${
    ((fontSize || 0) * 0.5 + initvalue.fontSize + 1) * fontScale
  }pt`;
  let item = content[name];
  if (name === "basicInfo") {
    item = {
      displayName: "个人信息",
      iconKey: "comment",
    };
  }
  const styles: any = {
    display: "inline-flex",
    alignItems: "center",
    gap: "4px",
    fontSize: titleFontSize,
    marginBottom: `${spacingFactor * 0.2 + 2}px`,
    paddingBottom: "2px",
    paddingTop: "2px",
    color: "#fff",
  };

  const [color, position] = useAccentColor(name);
  if (applyAccentColor?.includes("headings") && position) {
    styles.color = color;
  }
  let titleBkg = null;
  let borderBottomColor = `currentColor`;
  if (bkg) {
    titleBkg = getRgb(bkg);
    borderBottomColor = getRgb(bkg);
  }

  return (
    <Title>
      <h3
        className={"titleContent"}
        style={{
          ...styles,
          background: titleBkg || "rgba(0,0,0,.04)",
          justifyContent: "center",
          padding: "7px 34px",
          borderRadius: "30px",
          minWidth: 100,
        }}
      >
        {children || (
          <>
            {showIcon ? <Icon name={item?.iconKey}></Icon> : null}
            {item?.displayName}
          </>
        )}
        {/* </span> */}
      </h3>
    </Title>
  );
};
export default Index;
